<template>
    <view class="nested-pick-box">
        <view class="nested-pick-mask" @tap="close"></view>
        <view class="nested-pick-con">
            <view class="close-icon-box">
                <image src="../../static/ibs/img_comm_close.png" mode="" class="close-icon" @tap="close"></image>
            </view>
            <view v-if="isShowFirstLevel" class="nested-pick-title">{{title}}</view>
            <view v-if="isShowFirstLevel" class="level-box">
                <view v-for="(item,index) in firstLevelData" :key="item.index"
                      :class="{'level1-item':(firstLevelSelected!=item)}+{'level1-item-hl':(firstLevelSelected==item)}"
                      @tap="choseFirstLevel(index,item)">
                    {{item}}
                </view>
            </view>
			
                <view v-if="isShowSecondLevel" class="level-box">
						
                    <view class="level2-box-top">
                        <view class="nested-pick-title2">{{title}}</view>
                        <view class="return-first-level" @tap="toFirstLevel">返回上一级</view>
                    </view>
						<scroll-view scroll-y style="height: 25%;" scroll-into-view="red" scroll-top="0" >
				 <view class="level-item-box">
							
							<view v-for="(item,index) in secondLevelData" :key="item.index"
								  :class="{'level2-item':(secondLevelSelected!=item)}+{'level2-item-hl':(secondLevelSelected==item)}"
								  @tap="choseSecondLevel(index,item)">
								{{item}}
							</view>
					</view>	
					 	   	</scroll-view>
                </view>
     
            <!-- <text class="bottom-btn" @tap="sure"></text> -->
        </view>
	
    </view>
</template>
<script>
    export default {
        data() {
            return {
                isShowFirstLevel: true,
                isShowSecondLevel: false,
                cityTitle: '已选中：',
                firstLevelData: [],
                secondLevelData: [],
                firstLevelIndex: 0
            }
        },
        props: ['title', 'levelData', 'firstLevelPropertyName', 'secondLevelPropertyName', 'nestedPropertyName', 'firstLevelSelected', 'secondLevelSelected', 'level'],
        onLoad() {
            var that = this;
            // console.log(that.levelData);

            // 刷新第一层选择对象
            that.firstLevelData = [];
            that.firstLevelIndex = 0;
            console.log("firstLevelData--------------------", that.levelData);
            that.levelData.forEach(function (item, index) {
                if (that.firstLevelData.indexOf(item[that.firstLevelPropertyName]) <= 0) {
                    that.firstLevelData.push(item[that.firstLevelPropertyName]);
                    // 保存第一层已被选择对象的Index
                    if (item[that.firstLevelPropertyName] == that.firstLevelSelected) {
                        that.firstLevelIndex = index;
                    }
                }
            })

            // 如果第二层已被选择过，则刷新第二层选择对象，并切换至第二层
            if (that.secondLevelSelected != '') {
                // 获取第二层数据
                var children = that.levelData[that.firstLevelIndex][that.nestedPropertyName];
                // 判断第二层数据的数量
                if (children == null || children.length == 0) {
                    // 如果数量为零，不做任何处理
                } else {
                    // 如果数量不为零，则刷新第二层选择对象
                    that.secondLevelData = [];
                    children.forEach(function (item, index) {
                        that.secondLevelData.push(item[that.secondLevelPropertyName])
                    })
                    // 切换至第二层选择画面
                    that.isShowFirstLevel = false;
                    that.isShowSecondLevel = true;
                }
            }
            // console.log(that.firstLevelData);
        },
        methods: {
            close: function () {
                this.$emit('close');
            },
            choseFirstLevel(index, item) {
                // console.log(index);
                // console.log(item);
                var that = this;
                // 保存第一层选择结果
                that.firstLevelSelected = item;
                that.title = that.cityTitle + item;


                // 获取第二层数据   	//先判断层级，目录支持二级
                var children = that.levelData[index][that.nestedPropertyName];
                // 判断第二层数据的数量
                if (children == null || children.length == 0) {
                    // 如果数量为零，则返回选择结果
                    that.$emit('sure', that.firstLevelSelected, that.firstLevelSelected);
                    // 关闭选择控件
                    that.close();
                } else {
                    // 如果数量不为零，则刷新第二层选择对象
                    that.secondLevelData = [];
                    children.forEach(function (item, index) {
                        that.secondLevelData.push(item[that.secondLevelPropertyName])
                    })
                    // 切换至第二层选择画面
                    that.isShowFirstLevel = false;
                    that.isShowSecondLevel = true;
                }
            },
            choseSecondLevel(index, item) {
                // console.log(item);
                var that = this;
                // 保存第二层选择结果
                that.secondLevelSelected = item;
                // 返回选择结果
                that.$emit('sure', that.firstLevelSelected, that.secondLevelSelected);
                // 关闭选择控件
                that.close();
            },
            toFirstLevel() {
                // 清除第二层选择结果
                this.secondLevelSelected = "";
                // 切换至第一层选择画面
                this.isShowSecondLevel = false;
                this.isShowFirstLevel = true;
            }
        }
    }
</script>
<style>
    .nested-pick-box {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4000;
    }

    .nested-pick-box .nested-pick-mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .nested-pick-con {
        width: 100%;
        height: 90%;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10000;;
    }

    .close-icon-box {
        width: 100%;
        text-align: right;

    }

    .close-icon-box .close-icon {
        width: 36upx;
        height: 36upx;
        display: inline-block;
        position: relative;
        top: 48upx;
        right: 24upx;
        background-color: #ffffff;
        z-index: 20000;
    }

    .nested-pick-con .nested-pick-title {
        font-size: 30upx;
        margin-left: 24upx;
        margin-top: 120upx;
        margin-bottom: 30upx;

    }

    .nested-pick-title2 {
        font-size: 30upx;
        /* margin-left:24upx; */
        margin-top: 95upx;
        margin-bottom: 30upx;

    }

    .level-box {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: relative;
        width: 100vw;
        box-sizing: border-box;
        margin-top: 30upx;
        margin-left: 24upx;
        margin-right: 24upx;

    }

    .level-box .level1-item {
        width: 168upx;
        height: 68upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 68upx;
        font-size: 28upx;
        color: #494b4d;
        border: 1upx solid #e1e3e5;
        border-radius: 8upx;
        margin-bottom: 10upx;
        margin-right: 10upx;
        text-align: center;
        background: #fff;
        box-sizing: border-box;
        position: relative;
        z-index: 10000;
    }

    .level-box .level1-item:nth-child(4n) {
        margin-right: 0 !important;
    }

    .level-box .level1-item-hl {
        width: 168upx;
        height: 68upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 68upx;
        font-size: 28upx;
        color: #ffffff;
        /* border:1upx solid #e1e3e5; */
        border-radius: 8upx;
        margin-bottom: 10px;
        margin-right: 10upx;
        text-align: center;
        box-sizing: border-box;
        background: #ffbf00;
        position: relative;
        z-index: 10000;
    }

    .level-box .level1-item-hl:nth-child(4n) {
        margin-right: 0 !important;
    }

    .level2-box-top {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        overflow: hidden;
        text-align: center;
        box-sizing: border-box;
        background: #fff;
        position: relative;
        z-index: 10000;
    }

    .level-box .level2-item {
        width: 168upx;
        height: 68upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 68upx;
        font-size: 28upx;
        color: #494b4d;
        border: 1px solid #e1e3e5;
        border-radius: 8upx;
        margin-bottom: 10upx;
        margin-right: 10upx;
        text-align: center;
        box-sizing: border-box;
        background: #fff;
        position: relative;
        z-index: 10000;
    }
    .level-item-box{
		width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: relative;
        box-sizing: border-box;
		height: 700upx;
		align-content: flex-start;

	}
    .level-box .level1-item:nth-child(4n) {
        margin-right: 0 !important;
    }

    .level-box .level2-item-hl {
        width: 168upx;
        height: 68upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 68upx;
        font-size: 28upx;
        color: #ffffff;
        /* border:1upx solid #e1e3e5; */
        border-radius: 8upx;
        margin-bottom: 10upx;
        margin-right: 10upx;
        text-align: center;
        box-sizing: border-box;
        background: #ffbf00;
        position: relative;
        z-index: 10000;
    }

    .level-box .level2-item-hl:nth-child(4n) {
        margin-right: 0 !important;
    }

    .return-first-level {
        color: #1584fb;
        font-size: 30upx;
        margin-right: 60upx;
        margin-top: 95upx;

    }
</style>